<template>
  <dd
    class="q-item"
    :class="{
      'selected-item': question.UserAnswer.length > 0 ||
        question.QuestionTypeId === 8 || question.QuestionTypeId === 9,
      'error-item': showCorrectness
        && (question.IsRight === 2 || (question.QuestionTypeId !== 8 &&
        question.QuestionTypeId !== 9 && question.IsRight === 0)) }"
    @click="goCertainQuestion"
  >
    {{ question.Sequence }}
  </dd>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  // QuestionType： 筛选 0.全部类型 1.单选，2.多选，3.判断，4.不定项，5.主观题 6.配伍选择题 7.综合分析选择题 8.填空题 9.综合分析简答题
  // 10 摘要型选择题 11.案例分析选择题
  // QuestionTypeCode类型  1.单选，2.多选，3.判断，4.填空 5配伍 6案例分析选择题 7综合分析选择题 8主观题 9综合分析简答题
  props: {
    question: {
      type: Object,
      default: () => ({}),
    },
    qIndex: {
      type: Number,
      default: 0,
    },
    isResultPage: {
      type: Boolean,
      default: false,
    },
    showCorrectness: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    goCertainQuestion () {
      window.questionIndex = this.qIndex
      if (this.isResultPage) {
        this.$router.push({ name: 'examTest',
          query: {
            ...this.$route.query,
            showAnswer: '1',
            fromApp: '',
          },
        })
      } else {
        this.$router.back()
      }
    },
  },
})
</script>

<style lang="scss" scoped>
$size: 68px;
.q-item {
  display: inline-block;
  text-align: center;
  line-height: $size;
  height: $size;
  width: $size;
  font-size: 31px;
  border-radius: 50%;
  // border: 1px solid #333;
  @include px1border(all, #333);
  color: #333;
  margin: 5px 29px 25px 28px;
}
.selected-item {
  color: #fff;
  background-color: $primary-web;
  border-color: $primary-web;
}
.error-item {
  color: #fff;
  border-color: $error-web;
  background: $error-web;
}
</style>
